import { ReactNode, useState } from 'react'
import classes from './CommonLoginPage.module.css'
import LoginByPhoneNumber from '../LoginComponents/LoginByPhoneNumber'
import LoginByAccount from '../LoginComponents/LoginByAccount'
import LoginHeader from '../LoginComponents/LoginHeader'
import LoginByQRCode from '../LoginComponents/LoginByQRCode'

interface CommonLoginPage {
  //组件接口
  logo?: string | ReactNode //页面顶部LOGO元素
  footer?: ReactNode //页面底部元素
  register?: RegisterConfig //注册配置接口
  scanLogin?: ScanConfig //扫码登录配置接口
  accountLogin?: AccountConfig //账号密码登录配置接口
  phoneNumberLogin?: PhoneNumberConfig //手机短信验证码登录配置接口
  moreLogin?: ReactNode //更多方式元素
  policy?: ReactNode //登录框底部政策申明元素
  color?: string //主体颜色
  backgroundImageUrl?: string //背景图片链接
}

interface RegisterConfig {
  registerUrl?: string
  registerText?: string
}

interface ScanConfig {
  code: string
  tip?: string | ReactNode
}

interface AccountConfig {
  onLogin: (account: string, password: string) => any //登录回调
  resetPasswordUrl?: string
  resetAccountUrl?: string
}

interface PhoneNumberConfig {
  codeFetchWaitTime: number //获取短信验证码的等待时间,单位：秒
  onGetCode: (phoneNumber: string) => void
  onLogin: (phoneNumber: string, code: string) => void
}

const Login = (props: CommonLoginPage) => {
  const loginPageData = {
    logo: props.logo,
    footer: props.footer,
    register: props.register,
    scanLogin: props.scanLogin,
    accountLogin: props.accountLogin,
    phoneNumberLogin: props.phoneNumberLogin,
    moreLogin: props.moreLogin,
    policy: props.policy,
    color: props.color ? props.color : '#ff6a00',
    backgroundImageUrl: props.backgroundImageUrl,
  }

  const saveAccountDataHandler = (newLog: {
    account: string
    password: string
  }) => {
    if (loginPageData.accountLogin) {
      loginPageData.accountLogin.onLogin(newLog.account, newLog.password)

      console.log(
        loginPageData.accountLogin.onLogin(newLog.account, newLog.password)
      )
    }
  }

  const savePhoneDataHandler = (newLog: {
    phoneNumber: string
    verificationCode: string
  }) => {
    if (loginPageData.phoneNumberLogin)
      loginPageData.phoneNumberLogin.onLogin(
        newLog.phoneNumber,
        newLog.verificationCode
      )
  }

  const getCodeHandler = (phoneNumber: string) => {
    if (loginPageData.phoneNumberLogin)
      loginPageData.phoneNumberLogin.onGetCode(phoneNumber)
  }

  const getInitComponent = (loginPageData: CommonLoginPage) => {
    if (loginPageData.accountLogin)
      return (
        <LoginByAccount
          onLogin={saveAccountDataHandler}
          color={loginPageData.color}
        />
      )
    else if (!loginPageData.accountLogin && loginPageData.phoneNumberLogin)
      return (
        <LoginByPhoneNumber
          phoneNumberLogin={loginPageData.phoneNumberLogin}
          color={loginPageData.color}
          onLogin={savePhoneDataHandler}
          onGetCode={getCodeHandler}
        />
      )
    else if (!loginPageData.accountLogin && !loginPageData.phoneNumberLogin)
      return <div />
  }

  const [login, setLogin] = useState('account')
  const [component, setComponent] = useState(getInitComponent(loginPageData))

  const changeAccountLoginHandler = () => {
    setLogin('account')
    setComponent(
      <LoginByAccount
        onLogin={saveAccountDataHandler}
        color={loginPageData.color}
      />
    )
  }

  const changePhoneLoginHandler = () => {
    setLogin('phone')
    setComponent(
      <LoginByPhoneNumber
        phoneNumberLogin={loginPageData.phoneNumberLogin}
        color={loginPageData.color}
        onLogin={savePhoneDataHandler}
        onGetCode={getCodeHandler}
      />
    )
  }

  return (
    <>
      <LoginHeader logo={loginPageData.logo} color={loginPageData.color} />
      <div
        className={classes.loginWrapper}
        style={{ backgroundImage: `url(${loginPageData.backgroundImageUrl})` }}>
        <div
          className={
            props.moreLogin ? classes.loginContent : classes.lowLoginContent
          }>
          {/*<div
            className={classes.loginAd}
            onClick={() => {
              window.location.href = 'https://baidu.com'
            }}>
            { 广告位 }
          </div>*/}
          <div className={classes.loginView}>
            {loginPageData.register ? (
              <div className={classes.register}>
                <div className={classes.triangle}>
                  <a href={loginPageData.register.registerUrl}>注册</a>
                </div>
              </div>
            ) : (
              <div />
            )}
            <div className={classes.wrapper}>
              {loginPageData.scanLogin ? (
                <div className={classes.QRCode}>
                  {/* 二维码位 */}
                  <div className={classes.QRBlock}>
                    <div className={classes.QRLoginTitle}>扫码登录</div>
                    <div className={classes.QRPictures}>
                      <LoginByQRCode scanLogin={loginPageData.scanLogin} />
                    </div>
                    <div>{loginPageData.scanLogin.tip}</div>
                  </div>
                </div>
              ) : (
                <div />
              )}
              <div className={classes.inputView}>
                {/* 输入框位 */}
                {
                  <div className={classes.top}>
                    <div className={classes.tabNav}>
                      {loginPageData.accountLogin ? (
                        <div className={classes.block}>
                          <div
                            className={classes.loginText}
                            style={
                              login === 'account'
                                ? {
                                    color: loginPageData.color,
                                    borderBottomWidth: '2px',
                                    borderBottomStyle: 'solid',
                                    borderBottomColor: loginPageData.color,
                                  }
                                : {}
                            }
                            onClick={changeAccountLoginHandler}>
                            账号登录
                          </div>
                        </div>
                      ) : (
                        <div />
                      )}
                      {loginPageData.phoneNumberLogin ? (
                        <div className={classes.block}>
                          <div
                            className={classes.loginText}
                            style={
                              login === 'phone'
                                ? {
                                    color: loginPageData.color,
                                    borderBottomWidth: '2px',
                                    borderBottomStyle: 'solid',
                                    borderBottomColor: loginPageData.color,
                                  }
                                : {}
                            }
                            onClick={changePhoneLoginHandler}>
                            手机号登录
                          </div>
                        </div>
                      ) : (
                        <div />
                      )}
                    </div>
                    <div className={classes.tabContent}>{component}</div>
                  </div>
                }
                <div className={classes.thirdPartLogin}>
                  {loginPageData.moreLogin}
                </div>
              </div>
            </div>
            <div className={classes.protocolContent}>
              {loginPageData.policy}
            </div>
          </div>
        </div>
      </div>
      {loginPageData.footer}
    </>
  )
}

export default Login
